import { FC, useRef } from "react";
import { Button, Form, Input, Select, Space, Table } from 'antd';
import CreateUser from "./createUser";
import { IAction } from "@/type/model";
import { User } from "@/type/index";
const App: FC = () => {
    const [form] = Form.useForm();

    const userRef = useRef<{
        open: (type: IAction, data?: User.UserItem) => void
    }>();

    const handleSearch = () => {
        console.log("搜索")
    }
    const handleRest = () => {
        console.log("重置")
    }
    const dataSource = [
        {
            key: '1',
            userName: '胡彦斌',
            userEmail: "yjwj1801@163.com",
            dept: '开发一部',
        },
        {
            key: '2',
            userName: '胡彦祖',
            userEmail: "yjwj1802@163.com",
            dept: '西湖区湖底公园1号',
        },
    ];
    const columns = [
        {
            title: '用户名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '邮箱',
            dataIndex: 'userEmail',
            key: 'userEmail',
        },
        {
            title: '部门',
            dataIndex: 'dept',
            key: 'dept',
        },
        {
            title: '操作',
            key: 'action',
            render: (record: any) => (
                <Space size="middle">
                    <Button type="text" onClick={()=>{
                        editFun(record)
                    }}>编辑</Button>
                </Space>
            ),
        },
    ];
    interface DataType {
        key: React.Key;
        userName: string;
        userEmail: string;
        dept: string;
    }
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    const getData = () => {
        // 获取数据
        console.log("重新刷新table数据")
    }
    // 打开弹框
    const increamentFun = ()=>{
        userRef.current?.open('create')
    }
    //编辑
    const editFun = (e:any)=>{
        userRef.current?.open('edit',e)
    }
    return (
        <div className="container_wrap">
            <Form
                className='search-form'
                layout='inline'
                initialValues={{
                    state: 1
                }}
                form={form}
            >
                <Form.Item name='userId' label='用户ID'>
                    <Input placeholder='请输入用户ID'></Input>
                </Form.Item>
                <Form.Item name='userName' label='用户名称'>
                    <Input placeholder='请输入用户名称'></Input>
                </Form.Item>
                <Form.Item name='state' label='用户状态'>
                    <Select style={{ width: 120 }}>
                        <Select.Option value={0}>所有</Select.Option>
                        <Select.Option value={1}>在职</Select.Option>
                        <Select.Option value={2}>离职</Select.Option>
                        <Select.Option value={3}>试用期</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type='primary' className='mr10' onClick={handleSearch}>
                            搜索
                        </Button>
                        <Button type='primary' danger onClick={handleRest}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="base_table">
                <div className="header_wrap">
                    <div className="title">用户列表</div>
                    <div className="action">
                        <Space>
                            <Button type="primary" onClick={increamentFun}>新增</Button>
                            <Button type="primary" danger>批量删除</Button>
                        </Space>
                    </div>
                </div>

                <Table columns={columns} dataSource={dataSource} rowSelection={{
                    type: "checkbox",
                    ...rowSelection,
                }} />
            </div>
            <CreateUser myRef={userRef} update={() => {
                getData()
            }}></CreateUser>
        </div>
    )
}

export default App